import {
  View,
  Text,
  StyleProp,
  ViewStyle,
  StyleSheet,
  TextStyle,
} from 'react-native'
import { common } from '../assets/style/common'

type PriceProp = {
  price: string
  color?: string
  fontSize?: number
  textDecorationLine?: 'line-through'
  style?: StyleProp<ViewStyle>
  fontWeight?: boolean
  signStyle?: StyleProp<TextStyle>
}
export default function Price(props: PriceProp) {
  return (
    <View style={[StyleSheet.compose(common.flexCol, props.style)]}>
      <Text
        style={[
          {
            color: props.color || '#ff2222',
            fontSize:
              props.fontSize && props.fontSize < 10 ? props.fontSize : 10,
            position: 'relative',
            textDecorationLine: props.textDecorationLine,
            textDecorationColor: props.textDecorationLine
              ? props.color || '#ff2222'
              : 'transparent',
            fontWeight: props.fontWeight ? 'bold' : 'normal',
            verticalAlign: 'middle',
          },
          props.signStyle,
        ]}
      >
        ￥
        <Text
          style={{
            color: props.color || '#ff2222',
            fontSize: props.fontSize || 14,
            textDecorationLine: props.textDecorationLine,
            fontWeight: props.fontWeight ? 'bold' : 'normal',
            height: '100%',
            verticalAlign: 'middle',
          }}
        >
          {props.price}
        </Text>
      </Text>
    </View>
  )
}
